<template>
  <div class="bottom-left-chart-2">
    <div class="header-name">进入游戏</div>
    <div class="details-value"><span>{{ enter }}</span></div>
    <div class="header-name">创角率</div>
    <div class="details-value"><span>{{ ratio }}</span>%</div>
  </div>

</template>
<script>
import { entergamedata } from '@/api/chart'

export default {
  name: 'BottomLeftChart2',
  data() {
    return {
      enter: 0,
      ratio: 0
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      entergamedata().then(response => {
        this.handleData(response.data)
      })
    },
    handleData(data) {
      let install = 0
      let create = 0
      data.forEach(item => {
        install += parseInt(item.install)
        create += parseInt(item.create)
        this.enter += parseInt(item.enter_count)
      })
      if (install !== 0) {
        this.ratio = Number((create / install) * 100).toFixed(2)
      } else {
        this.ratio = 0
      }
    }
  }
}
</script>
<style lang="scss">
.bottom-left-chart-2 {
  .header-name {
    height: 100px;
    line-height: 100px;
    font-size: 20px;
    text-align: center;
  }

  .details-value {
    height: 40px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;

    span {
      color: #00c0ff;
      font-size: 45px;
    }
  }

  .dv-charts-container {
    height: 100%;
  }
}
</style>
